<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item>
            <el-dropdown trigger="click" @command="handleType">
              <el-button>
                请选择类型<i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">个人分销商</el-dropdown-item>
                <el-dropdown-item command="2">企业分销商</el-dropdown-item>
                <el-dropdown-item command="3">全部</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-dropdown trigger="click">
              <el-button>
                请选择是否删除<i
                  class="el-icon-caret-bottom el-icon--right"
                ></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>是</el-dropdown-item>
                <el-dropdown-item>否</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="table-container">
      <el-table
        ref="adminTable"
        :data="list"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="id" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="账户" align="center">
          <template slot-scope="scope">{{ scope.row.account }}</template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="性别" align="center">
          <template slot-scope="scope">{{ scope.row.sex }}</template>
        </el-table-column>
        <el-table-column label="电话" align="center">
          <template slot-scope="scope">{{ scope.row.phoneNumber }}</template>
        </el-table-column>
        <el-table-column label="身份证号" align="center">
          <template slot-scope="scope">{{ scope.row.idCard }}</template>
        </el-table-column>
        <el-table-column label="类型" width="160" align="center">
          <template slot-scope="scope">{{
            scope.row.dtype == 1 ? "个人分销商" : "企业分销商"
          }}</template>
        </el-table-column>
        <el-table-column label="等级" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.level }}</template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.$index, scope.row)"
            >
              查看详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.page"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 20]"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="个人分销商详情"
      :visible.sync="dialogVisible"
      width="50%"
      center
    >
      <el-form :model="admin" ref="adminForm" size="small" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="id：">
              <el-input v-model="admin.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="帐号：">
              <el-input v-model="admin.account"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="等级：">
              <el-input v-model="admin.level"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名：">
              <el-input v-model="admin.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：">
              <el-input v-model="admin.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话：">
              <el-input v-model="admin.phoneNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="身份证号：">
              <el-input v-model="admin.idCard"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型：">
              <el-input v-model="admin.dtype"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业法人：">
              <el-input v-model="admin.legalPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名：">
              <el-input v-model="admin.enterpriseName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="企业地址：">
              <el-input v-model="admin.enterpriseAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><el-form-item label="统一社会信用代码：">
              <el-input v-model="admin.serialNumber" size="large"></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { disList, deleteAdmin, disDetail } from "@/api/dis";
const defaultListQuery = {
  idDelete: 1,
  page: 1,
  pageSize: 1,
  DType: null,
};
export default {
  name: "disList",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      admin: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查看详情
    handleDetail(index, row) {
      this.dialogVisible = true;
      disDetail(row.id).then((response) => {
        this.admin = response.data[0];
        if(response.data[0].dtype==1) {
          this.admin.dtype = '个人分销商'
        } else{
          this.admin.dtype = '企业分销商'
        }
      });
    },
    // 选择分销商类型
    handleType(command) {
      if (command - 0 == 3) {
        this.listQuery.DType = null;
      } else {
        this.listQuery.DType = command - 0;
      }
      this.getList();
    },
    // 分页选择每页条数
    handleSizeChange(val) {
      this.listQuery.page = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    // 分页选择当前第几页
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 删除用户
    handleDelete(index, row) {
      this.$confirm("是否要删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteAdmin(row.id).then((response) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    // 请求分销商列表接口 获取分销商列表数据
    getList() {
      this.listLoading = true;
      disList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data;
        this.total = response.data.length;
      });
    },
  },
  watch: {
    // listQuery: {
    //   handler(newVal) {
    //     if (newVal.keyword == "") {
    //       this.getList();
    //     }
    //   },
    //   deep: true,
    // },
  },
};
</script>
<style></style>
